<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <div class="container">
      <nav>
        <router-link to="/">主页</router-link>
        <router-link to="/add">添加</router-link>
      </nav>
      <!-- 路由容器 -->
      <router-view>

      </router-view>
    </div>
  </div>

  <!-- 引入vue -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    //定义一个组件 添加资产
    const pageAdd = {
      template: `
      <div>
      <form class="form-inline">
        <input type="text" v-model.trim="asset.name" class="form-control" placeholder="资产名称">
        <input type="text" v-model.number="asset.price" class="form-control" placeholder="价格">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-primary" @click.prevent="hAdd">添加资产</button>
      </form>
      </div>
      `,
      data() {
        return {
          asset: {
            name: '',
            price: ''
          }
        }
      },
      methods: {
        hAdd() {
          //4.1、解构赋值
          const { name, price } = this.asset
          //4.2、判断一些用户的输入是否合法，提示一下
          if (name === '') {
            alert('名字不能为空')
            return
          }
          if (price <= 0) {
            alert('价钱不能是负数')
            return
          }
          //4.3、前两项判断完成后，用户输入合法，发送请求添加
          axios({
            method: 'post',
            url: 'http://localhost:3000/assets',
            data: {
              name: name,
              price: price
            }
          }).then(res => {
            //4.4 清空输入框数据
            this.asset.name = ''
            this.asset.price = ''

            //4.5 跳转到主页
            this.$router.push('/')
          })
        }
      }
    }


    //定义一个组件 主页
    const pageHome = {
      template: `
      <div>
      <!-- 搜索 -->
      <form class="form-inline" style="padding: 20px 0">
        <input type="text" 
        v-model.trim="keyword" 
        class="form-control" placeholder="输入关键字进行搜索">
      </form>
      <!-- 表格 -->
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,idx) in list">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price | fPrice}}</td>
            <td><a href="#" @click.prevent="hDelete(item.id)">删除</a></td>
          </tr>

          <tr v-if="list.length == 0">
            <td colspan="4">没有数据</td>
          </tr>
        </tbody>
      </table>
      </div>
      `,
      data() {
        return {
          list: [

          ],
          keyword: '',// 用来做搜索的关键字
        }
      },
      created() {
        this.loadData()
      },
      //1、过滤器给价格前面加上￥
      filters: {
        fPrice: function (val) {
          return '￥' + val
        }
      },
      //5、利用侦听器搜索关键字
      watch: {
        //ES6中属性名的双引号可省略
        keyword: function (newVul, oldVal) {
          console.log(this.keyword);
          //侦听器可省略if判断，如果表单内容为空，自动全部显示
          axios({
            method: 'get',
            url: 'http://localhost:3000/assets',
            params: {
              name_like: this.keyword
            }
          }).then(res => {
            //把查询到的数据更新到数据项中
            this.list = res.data
          })
        }
      },
      methods: {
        loadData() {
          axios({
            method: 'GET',
            url: 'http://localhost:3000/assets'
          }).then(res => {
            console.log(res.data); //响应数据
            this.list = res.data; //把响应到的数据给data，this指向vue实例对象
          })
        },
        //3|删除功能
        hDelete(id) {
          if (!window.confirm('你确定要删除?')) {
            return
          }
          axios({
            method: 'DELETE',
            url: 'http://localhost:3000/assets/' + id
          }).then(res => {
            this.loadData()
          })
        }
      }
    }


    //定义好路径
    const router = new VueRouter({
      routes: [
        //主页
        { path: '/', component: pageHome },
        { path: '/add', component: pageAdd }
      ]
    })


    new Vue({
      el: '#app',
      router: router
    })
  </script>
</body>

</html>